import React from 'react';
import { useState, useEffect } from 'react'
const Father = () => {
    // 查看当前网络是否在线, 说白了就是看看当前电脑是否有网?有网就显示在线,否则显示离线
    // 使用bom 中的一个对象navigatior,该对象的属性 onLine 的值为boolean, true 为在线,否则离线
    // console.log('navigator', navigator);

    // 定义一个变量, 定义初始的网络状态
    const [networkstatus, setNetworkStatus] = useState(navigator.onLine)
    // 希望监听浏览器的在线和离线状态, 进而重新设置 网络状态

    useEffect(() => {
        // online 事件: 当网络状态变成在线触发该事件
        window.addEventListener('online', () => {
            console.log('online');
            setNetworkStatus(true)
        })
        // offline 事件: 当网络状态变成离线的时候触发
        window.addEventListener('offline', () => {
            console.log('offline');
            setNetworkStatus(false)
        })

    }, [])

    return (
        <div>
            {/*  */}
            <p>自定义hook</p>
            <p>是否在线: {networkstatus ? '在线' : '离线'}</p>
        </div>
    );
}

export default Father;
